<template>
  <div>
    <div style="font-size: 18px; font-weight: bold">通知</div>
    <div style="width: 100%; display: flex">
      <span style="margin-left: auto; padding: 10px 0">更多</span>
    </div>
    <div style="width: 100%" @click="getTo">
      <vueSeamlessScroll :data="listData" :class-option="option" class="warp">
        <div v-for="(item, index) in listData" :key="index">
          <div style="display: flex; margin: 10px 0; cursor: pointer">
            <span :data-ids="item.id">{{ item.title }}</span
            ><span style="width: 20%; margin-left: auto">{{ item.date }}</span>
          </div>
        </div>
      </vueSeamlessScroll>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      listData: [
        // {
        //   title: "请审批wangs商城项目",
        //   date: "2017-12-16",
        // },
        // {
        //   title: "请审批采购关于购买服务器1",
        //   date: "2017-12-16",
        // },
        // {
        //   title: "请审批采购关于购买服务器2",
        //   date: "2017-12-16",
        // },
        // {
        //   title: "请审批采购关于购买服务器3",
        //   date: "2017-12-16",
        // },
        // {
        //   title: "请审批采购关于购买服务器4",
        //   date: "2017-12-16",
        // },
        // {
        //   title: "请审批采购关于购买服务器5",
        //   date: "2017-12-16",
        // },
      ],
      option: {
        step: 0.6,
      },
    };
  },
  mounted() {
    this.getlistData();
  },
  methods: {
    getlistData() {
      this.$http.get("/dashboardNotice").then((res) => {
        console.log(res, "res");
        if (res.code == 200) {
          this.listData = res.data;
        }
      });
    },
    getTo(e) {
      if (e.target.localName == "span") {
        this.$router.push({
          path: "/read",
          query: {
            id: e.target.dataset.ids,
          },
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.warp {
  // height: 270px;
  width: 100%;
  margin: 20px 0;
  overflow: hidden;
  left: 0;
  transform: translate(0, 0) !important;
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    li,
    a {
      display: block;
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: space-between;
      font-size: 15px;
    }
  }
}
</style>